<template>
    <div>
      <div class="vs-hed">
        <div class="vs-d1">
          <div class="d1-css">
            <p>当前票数</p>
            <p>{{vote}}</p>
          </div>
          <div class="d1-css">
            <p>当前排名</p>
            <p>{{rank}}</p>
          </div>
        </div>
        <p>距离活动结束</p>
        <ul class="ulcount">
          <li v-for="(item,index) in timeData" :key="index">
            <p>{{item.dy}}</p>
            <p>{{item.txt}}</p>
          </li>
        </ul>
      </div>

      <video :src="smeta" controls width="100%" :poster="thumb"></video>
      <div class="v2-cont">
        <p>{{video_title}}</p>
        <p>{{video_description}}</p>
        <p>
          <img :src="'./static/lyl/time.png'" alt="">
          <span>{{create_time}}</span>
          <img :src="'./static/lyl/loke.png'" alt="">
          <span>{{play}}</span>
        </p>
      </div>

      <ul class="vs2-player">
        <li>参赛者</li>
        <li v-for="(item,index) in playData" :key="index">
          <img :src="item.avatar" alt="">
          <p>{{item.nickname}}</p>
        </li>
      </ul>
      <div class="vote-footer">
        <button @click="votesuc()">{{vote_status==0?'投票':'已投票'}}</button>
      </div>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  import {Dialog} from 'vant';
    export default {
      name: "Voteshow",
      data(){
        return {
          day:0,
          hour:0,
          minete:0,
          secnd:0,
          vote:'',
          rank:'',
          year:'',
          month:'',
          day2:'',
          smeta:'',
          thumb:'',
          video_title:'',
          video_description:'',
          create_time:'',
          play:'',
          playData:[],
          vote_status:''
        }
      },
      beforeMount(){
        let params = {
          program_id:this.$route.params.id2,
          user_id:this.$store.state.user_id
        };
        list.programDetail(params).then(res=>{
          console.log(res.data);
          this.vote = res.data.vote;
          this.rank = res.data.rank;
          this.year = res.data.year;
          this.month = res.data.month;
          this.day2 = res.data.day;
          this.playData = res.data.img;
          this.vote_status = res.data.vote_status
        });

        let params2 = {id:this.$route.params.id3};
        list.activeVideo(params2).then(res=>{
          console.log(res);
          this.smeta = res.data[0].smeta;
          this.thumb = res.data[0].thumb;
          this.video_title = res.data[0].video_title;
          this.video_description = res.data[0].video_description;
          this.create_time = res.data[0].create_time;
          this.play = res.data[0].play;
        })
      },
      mounted(){
        setInterval(function () {
          var date = new Date();
          var date2 = new Date(this.year,this.month-1,this.day2,23,59,59);
          var s = date2 - date;
          this.day = parseInt(s/1000/60/60/24);
          s-=this.day*24*60*60*1000;
          this.hour = parseInt(s/1000/60/60);
          s-=this.hour*60*60*1000;
          this.minete = parseInt(s/1000/60);
          s-=this.minete*60*1000;
          this.secnd = parseInt(s/1000);
          this.secnd = formatTime(this.secnd);
          this.minete = formatTime(this.minete);
          this.hour = formatTime(this.hour);
          this.day = formatTime(this.day);
          function formatTime(t){
            return t < 10 ? "0"+t : t;
          }
        }.bind(this),1000)

        mui.back = function() {
          window.history.go(-1);
        }
      },
      computed:{
        timeData(){
          return [
            {dy:this.day,txt:'天'},
            {dy:this.hour,txt:'时'},
            {dy:this.minete,txt:'分'},
            {dy:this.secnd,txt:'秒'}
          ]
        }
      },
      methods:{
        votesuc(){
          if (this.vote_status==0){
            this.$router.push('/votesucess/'+this.$route.params.id3+'/'+this.$route.params.id2);
          } else{
            Dialog.alert({
              message: "你已投票，谢谢您的支持"
            });
          }
        }
      }
    }
</script>

<style scoped>

  .vs-hed{
    text-align: center;
    border-bottom: 2px solid #dcdcdc;
    margin-bottom: 20px;
  }
  .vs-hed .vs-d1{
    display: flex;
    justify-content: space-around;
  }
  .vs-hed .vs-d1 .d1-css{
    width: 190px;
    height: 80px;
    border: 2px solid #884ca4;
    border-radius: 10px;
    padding-top: 7px;
  }
  .vs-hed .vs-d1 .d1-css p{
    font-size: 26px;
    color: #884ca4;
  }
  .vs-hed>p{
    font-size: 26px;
    padding: 20px 0;
  }
  .ulcount{
    display: flex;
    justify-content: center;
  }
  .ulcount li{
    margin-right: 36px;
  }
  .ulcount li:last-child{
    margin-right: 0;
  }
  .ulcount li p:nth-child(1){
    width: 60px;
    height: 34px;
    background: #e98345;
    color: #fff;
    font-size: 26px;
  }
  .ulcount li p:nth-child(2){
    font-size: 26px;
    padding: 20px 0;
  }

  .v2-cont{
    padding: 20px 40px;
    border-bottom: 1px solid #dcdcdc;
  }
  .v2-cont p{
    padding-bottom: 10px;
  }
  .v2-cont p:nth-child(1){
    font-size: 32px;
    font-weight: bold;
  }
  .v2-cont p:nth-child(2){
    font-size: 24px;
    color: #8c8c8c;
  }
  .v2-cont p:nth-child(3) img{
    width: 30px;
    vertical-align: bottom;
  }
  .v2-cont p:nth-child(3) img:nth-child(3){
    width: 36px;
    vertical-align: bottom;
  }
  .v2-cont p:nth-child(3) span{
    font-size: 24px;
    color: #8c8c8c;
    margin: 0 20px;
  }
  .vs2-player{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px 40px;
    border-bottom: 2px solid #dcdcdc;
  }
  .vs2-player li{
    text-align: center;
    margin-right: 20px;
  }
  .vs2-player li:nth-child(1){
    font-size: 26px;
    color: #8c8c8c;
    align-self: center;
  }
  .vs2-player li img{
    width: 100px;
    height: 100px;
  }
  .vs2-player li p{
    font-size: 26px;
    color: #884ca4;
    width: 110px;
    height: 36px;
    line-height: 36px;
    border: 2px solid #884ca4;
    border-radius: 18px;
    margin-top: 20px;
  }
  .vote-footer{
    padding: 20px 40px;
  }
  .vote-footer button{
    width: 100%;
    height: 80px;
    background: #884ca4;
    font-size: 36px;
    color: #fff;
    border-radius: 10px;
  }
</style>
